<!-- Please remove this file from your project -->
<template>
  <div>
    <div class="home-body">
      <!-- 顶部 -->
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">
          <img src="../assets/img/众图网.png" width="100" alt="" />
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"> </b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav>
            <b-nav-item href="#">首页</b-nav-item>
            <b-nav-item href="#">设计素材</b-nav-item>
            <b-nav-item href="#">装饰画</b-nav-item>
            <b-nav-item href="#">摄影图</b-nav-item>
            <b-nav-item href="#">视频素材</b-nav-item>
          </b-navbar-nav>

          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item href="#">开店</b-nav-item>
            <b-nav-item href="#">登录/注册</b-nav-item>
            <b-nav-item href="#">帮助中心</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
      <!-- 轮播图 -->
      <div>
        <b-carousel
          id="carousel-1"
          v-model="slide"
          :interval="4000"
          controls
          indicators
          background="#ababab"
          img-width="1024"
          img-height="400"
          style="text-shadow: 1px 1px 2px #333"
          @sliding-start="onSlideStart"
          @sliding-end="onSlideEnd"
        >
          <!-- Text slides with image -->
          <b-carousel-slide
            img-src="https://imgpp.ztupic.com/images/清明节-20220322-03.jpg?x-oss-process=image/sharpen,100"
          ></b-carousel-slide>

          <!-- Slides with custom text -->
          <b-carousel-slide
            img-src="https://imgpp.ztupic.com/images/20220209-VIP确定.jpg?x-oss-process=image/sharpen,100"
          >
          </b-carousel-slide>
          <b-carousel-slide
            img-src="https://imgpp.ztupic.com/images/%E4%B9%A1%E6%9D%91%E6%8C%AF%E5%85%B4-2022.0318.jpg?x-oss-process=image/sharpen,100"
          >
          </b-carousel-slide>
        </b-carousel>
      </div>
      <!-- 分类 -->
      <div class="container ">
        <div class="row">
          <div class="col-md-3 col-sm-6 col-6 mt-4 ">
            <div >
              <img
                class="img-fluid"
                src="https://imgpp.ztupic.com/images/%E4%B8%A4%E4%BC%9A-0301.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-6 mt-4 ">
            <div >
              <img
                class="img-fluid"
                src="https://imgpp.ztupic.com/images/%E4%B8%A4%E4%BC%9A-0301.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-6 mt-4">
            <div >
              <img
                class="img-fluid"
                src="https://imgpp.ztupic.com/images/%E4%B8%A4%E4%BC%9A-0301.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-6 mt-4">
            <div >
              <img
                class="img-fluid"
                src="https://imgpp.ztupic.com/images/%E4%B8%A4%E4%BC%9A-0301.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
//  src="https://imgpp.ztupic.com/images/清明节-20220322-03.jpg?x-oss-process=image/sharpen,100"
// src="https://imgpp.ztupic.com/images/20220209-VIP确定.jpg?x-oss-process=image/sharpen,100"
export default {
  name: "NuxtTutorial",
};
</script>

<style lang="scss" scoped >
.home-body {
  background: #f5f5f5;
  padding-bottom: 20px;
  // padding: 20px;
}
// 分类
</style>
